<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>登录</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/login.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/swiper.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/swiper.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/animate.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/iconfont/iconfont.css">
    <script src="${pageContext.request.contextPath}/js/verifyCode.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/verifyCode.css"/>
    <script src="${pageContext.request.contextPath}/js/jquery.validate.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/additional-methods.min.js"></script>
    <script src="${pageContext.request.contextPath}/layer/layer.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/nprogress.css">
    <script src="${pageContext.request.contextPath}/js/nprogress.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.cookie.js"></script>
    <script src="${pageContext.request.contextPath}/js/Sliding_Validation_Gu.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .error {
            font-size: 12px;
            color: #ef4238;
            margin-top: 8px;
        }
    </style>
    <script>
        $(function () {
            //var sliding_validation = SlidingValidation.create($('#check'),{},function(){});
            $('#checkoutInput').val(show_num.join(""));
            $("#login-verify-code-canvas").on('click',function(){
                $('#checkoutInput').val(show_num.join(""));
            });
            //验证码赋值
            //
            jQuery.validator.addMethod("isMobile", function(value, element,param) {
                var pattern= /(^1[3,4,5,7,8]{1}[0-9]{9}$)/;
                if(pattern.test(value)){
                    return true;
                }else{
                    return false;
                }
            }, "请输入正确的手机号");
            jQuery.validator.addMethod("testPassword", function(value, element,param) {
                var pattern= /^(\w){6,18}$/;
                if(pattern.test(value)){
                    return true;
                }else{
                    return false;
                }
            }, "请输入正确的密码");
            //轮播
            let bgSwiper = new Swiper(".swiper-container", {
                direction: "horizontal",
                loop: true,
                autoplay: {
                    disableOnInteraction: false
                }
            });
            //点击登录和注册
            $('#btn-login').click(function () {
                $('#login-title').hide();
                $('#login-panel').css('visibility', 'visible');
                $('#tab-sign').show();
                $('#register-form').hide();
                let index = $($('.tab-sign span.cur')).index()
                if (index === 0) {
                    $('#login-form1').show();
                    $('#login-form2').hide();
                } else {
                    $('#login-form1').hide();
                    $('#login-form2').show();
                }
            })
            //切换密码登录和验证码登录
            $('.tab-sign span').click(function () {
                $('#login-title').hide();
                $(this).parent().find('span').removeClass('cur');
                $(this).addClass('cur');
                if ($(this).index() === 0) {
                    $('#login-form1').show();
                    $('#login-form2').hide();
                } else {
                    $('#login-form2').show();
                    $('#login-form1').hide();
                }
            });
            //注册界面
            $('.register-btn').click(function () {
                $('#login-title').hide();
                $('#login-panel').css('visibility', 'visible');
                $('#inner-box').children().hide();
                $('#register-form').show();
            });
            //直接登录
            $('#show-login').click(function () {
                $('#login-title').hide();
                $('#register-form').hide();
                $('#tab-sign').show();
                let index = $($('.tab-sign span.cur')).index()
                if (index === 0) {
                    $('#login-form1').show();
                    $('#login-form2').hide();
                } else {
                    $('#login-form1').hide();
                    $('#login-form2').show();
                }
            });
            //校验 用户名密码登录
            $('#loginForm1Submit').click(function () {
                //校验
                let flag = $('#login-form1').valid();
                //为true 提交表单
                if (flag) {
                    //登录代码
                    NProgress.start();
                    //登录发 ajax请求
                    $.ajax({
                        url:'${pageContext.request.contextPath}/front/user/loginByUsername',
                        dataType: "json",
                        data:$('#login-form1').serialize(),
                        success:function (data) {
                            NProgress.done();
                            layer.msg(data.message,function () {
                                //登录成功 跳转主页
                                if(parseInt(data.status)===1){
                                    window.location.href = '${pageContext.request.contextPath}/front/index/home'
                                }
                            });
                        }
                    })
                }
            });
            $('#login-form1').validate({
                rules: {
                    username: {
                        required: true,
                        isMobile: true,
                    },
                    password: {
                        required: true
                    },
                    checkCode: {
                        required: true,
                        maxlength: 4,
                        equalTo: "#checkoutInput"
                    }
                },
                messages: {
                    username: {
                        required: "手机号不能为空",
                        isMobile:"请输入正确的手机号",
                    },
                    password: {
                        required: "密码不能为空"
                    },
                    checkCode: {
                        required: "验证码不能为空",
                        maxlength: "验证码错误",
                        equalTo: "验证码错误"
                    }
                },
                errorPlacement: function (error, element) {
                    error.appendTo(element.parent().parent());
                }
            });
            $('#loginForm2Submit').click(function () {
                let flag = $('#login-form2').valid();
                //为true 提交表单
                if (flag) {
                    //登录代码
                    //登录代码
                    NProgress.start();
                    //登录发 ajax请求
                    $.ajax({
                        url:'${pageContext.request.contextPath}/front/user/loginByCheckCode',
                        dataType: "json",
                        data:$('#login-form2').serialize(),
                        success:function (data) {
                            NProgress.done();
                            layer.msg(data.message,function () {
                                //登录成功 跳转主页
                                if(parseInt(data.status)===1){
                                    window.location.href = '${pageContext.request.contextPath}/front/index/home'
                                }
                            });
                        }
                    })
                }
            });
            //获取验证码
            $('#checkCode_btn_login').click(function () {
                let phone = $('#loginPhone').val();
                let pattern= /(^1[3,4,5,7,8]{1}[0-9]{9}$)/;
                if(phone!==""&&pattern.test(phone)){
                    getCheckCode(phone);
                    daojishi(60,$(this));
                }else{
                    layer.msg("获取失败");
                }
            });
            $('#login-form2').validate({
                rules: {
                    phone: {
                        required: true,
                        isMobile: true,
                    },
                    checkCode: {
                        required: true,
                        maxlength: 4,
                    }
                },
                messages: {
                    phone: {
                        required: "手机号不能为空",
                        isMobile: "请输入正确的手机号",
                    },
                    checkCode: {
                        required: "验证码不能为空",
                        maxlength: "验证码错误",
                    }
                },
                errorPlacement: function (error, element) {
                    error.appendTo(element.parent().parent());
                }
            });
            $('#checkCode_btn_register').click(function () {
                let phone = $('#registerPhone').val();
                let password = $('#registerPassword').val();
                let patternPhone= /(^1[3,4,5,7,8]{1}[0-9]{9}$)/;
                let patternPassword= /^(\w){6,18}$/;
                if(phone!==""&&password!==""&&patternPhone.test(phone)&&patternPassword.test(password)){
                    getCheckCode(phone);
                    daojishi(60,$(this));
                }else {
                    layer.msg("获取失败");
                }
            });
            $('#registerFormSubmit').click(function () {
                let flag = $('#register-form').valid();
                //为true 提交表单
                if (flag) {
                    //注册代码
                    NProgress.start();
                    //登录发 ajax请求
                    $.ajax({
                        url:'${pageContext.request.contextPath}/front/user/register',
                        dataType: "json",
                        data:$('#register-form').serialize(),
                        success:function (data) {
                            NProgress.done();
                            layer.msg(data.message,function () {
                                //登录成功 跳转主页
                                if(parseInt(data.status)===1){
                                    window.location.href = '${pageContext.request.contextPath}/front/index/home'
                                }
                            });
                        }
                    })
                }
            });
            $('#register-form').validate({
                rules: {
                    phone: {
                        required: true,
                        isMobile: true,
                        remote:{
                            url:'${pageContext.request.contextPath}/front/user/verifyUsername',
                            type:'post',
                            data:{
                                "phone":function () {
                                    return $('#registerPhone').val()
                                }
                            }
                        }
                    },
                    password:{
                        required: true,
                        testPassword:true
                    },
                    checkCode: {
                        required: true,
                        maxlength: 4,
                    }
                },
                messages: {
                    phone: {
                        required: "手机号不能为空",
                        isMobile: "请输入正确的手机号",
                        remote:"用户已存在",
                    },
                    password:{
                        required: "密码不能为空",
                        testPassword:"请输入正确的密码"
                    },
                    checkCode: {
                        required: "验证码不能为空",
                        maxlength: "验证码错误",
                    }
                },
                errorPlacement: function (error, element) {
                    error.appendTo(element.parent().parent());
                }
            })
        });

        //获取验证码的倒计时  注册
        function daojishi(seconds,obj) {
            if(seconds > 1){
                seconds--;
                $(obj).val("已发送"+seconds+"s").attr("disabled",true);
                setTimeout(function () {
                    daojishi(seconds,obj);
                },1000)
            }else{
                $(obj).val("获取验证码").attr("disabled", false);
            }
        }
        function getCheckCode(phone) {
            $.post(
                '${pageContext.request.contextPath}/front/user/getCheckCode',
                {phone:phone},
                function (data) {
                    if(data.status === 1){
                        layer.msg('获取成功');
                    }
                }
            )
        }
    </script>

</head>
<body>
<div class="login-btn">
    <span id="btn-login">登录</span>
    <span id="btn-register" class="register-btn">注册</span>
</div>
<div class="login-container swiper-container">
    <div class="overlay"></div>
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img
                    src="${pageContext.request.contextPath}/images/p4187.jpg"
                    class="login-container-bg"
            />
        </div>
        <div class="swiper-slide">
            <img
                    src="${pageContext.request.contextPath}/images/p4188.jpg"
                    class="login-container-bg"
            />
        </div>
        <div class="swiper-slide">
            <img
                    src="${pageContext.request.contextPath}/images/p4189.jpg"
                    class="login-container-bg"
            />
        </div>
        <div class="swiper-slide">
            <img
                    src="${pageContext.request.contextPath}/images/p4190.jpg"
                    class="login-container-bg"
            />
        </div>
        <div class="swiper-slide">
            <img
                    src="${pageContext.request.contextPath}/images/p4191.jpg"
                    class="login-container-bg"
            />
        </div>
        <div class="swiper-slide">
            <img
                    src="${pageContext.request.contextPath}/images/p4200.jpg"
                    class="login-container-bg"
            />
        </div>
        <div class="swiper-slide">
            <img
                    src="${pageContext.request.contextPath}/images/p4210.jpg"
                    class="login-container-bg"
            />
        </div>
        <div class="swiper-slide">
            <img
                    src="${pageContext.request.contextPath}/images/p4213.jpg"
                    class="login-container-bg"
            />
        </div>
        <div class="swiper-slide">
            <img
                    src="${pageContext.request.contextPath}/images/p4220.jpg"
                    class="login-container-bg"
            />
        </div>
    </div>
</div>
<div class="login-panel" id="login-panel">
    <div class="login-panel-left">
        <div class="left-item item-1">
            <img
                    src="${pageContext.request.contextPath}/images/IMG_20191223_163010.png"
            />
        </div>
        <div class="left-item item-2">
            <i class="iconfont icon-menu"></i>
            <div class="left-item-word">
                <h3>海量</h3>
                <p>海量电影任君挑选</p>
            </div>
        </div>
        <div class="left-item item-3">
            <i class="iconfont icon-jishizhanshi"></i>
            <div class="left-item-word">
                <h3>及时</h3>
                <p>最新电影及时上新</p>
            </div>
        </div>
    </div>
    <div class="login-panel-right">
        <div class="inner-box" id="inner-box">
            <div class="tab-sign" id="tab-sign">
                <span class="cur">密码登录</span>
                <span>验证码登录</span>
            </div>
            <form id="login-form1">
                <div class="login-form1" style="margin-top: -20px">
            <span class="input-wrap">
              <div style="position: relative">
                <i class="iconfont icon-phone"></i>
                <input
                        type="tel"
                        class="input-phone"
                        placeholder="手机号"
                        name="username"
                />
              </div>
            </span>
                    <span class="input-wrap">
              <div style="position: relative">
                <i class="iconfont icon-password"></i>
                <input
                        type="password"
                        class="input-phone"
                        placeholder="密码"
                        name="password"
                />
              </div>
            </span>
                    <span class="input-wrap">
              <div style="position: relative">
                <i class="iconfont icon-yanzhengma"></i>
                <input type="hidden" id="checkoutInput" />
                <input
                        type="password"
                        class="input-phone"
                        placeholder="验证码"
                        style="width: 200px;padding-right: 120px"
                        name="checkCode"
                />
                <canvas
                        class="verify-code-canvas"
                        id="login-verify-code-canvas"
                        style="margin-left: 10px;margin-top: -15px;"
                ></canvas>
              </div>
            </span>
                    <span class="input-wrap-btn" id="loginForm1Submit">
              登录
            </span>
                    <span class="register-tip">
              <p>没有账号 <span class="register-btn">立即注册</span></p>
            </span>
                </div>
            </form>
            <form id="login-form2" style="display: none">
                <div class="login-form2">
            <span class="input-wrap">
              <div style="position: relative">
                <i class="iconfont icon-phone"></i>
                <input type="tel" class="input-phone" placeholder="手机号" name="phone" id="loginPhone"/>
              </div>
            </span>
                    <span class="input-wrap">
              <div style="position: relative">
                <i class="iconfont icon-yanzhengma"></i>
                <input
                        type="password"
                        class="input-phone  input-checkcode"
                        placeholder="验证码"
                        name="checkCode"
                />
                <input
                        class="btn btn-default"
                        type="button"
                        value="获取验证码"
                        id="checkCode_btn_login"
                        style="height: 42px;float: right;color: #9fa3b0;outline: none"
                />
              </div>
            </span>
                    <span class="input-wrap-btn" id="loginForm2Submit">
              登录
            </span>
                    <span class="register-tip">
              <p>没有账号 <span class="register-btn">立即注册</span></p>
            </span>
                </div>
            </form>
            <form id="register-form" style="display: none;margin-top: -40px" >
                <div class="register-form">
            <span class="input-wrap">
                <div style="position: relative">
                    <i class="iconfont icon-phone"></i>
                    <input type="tel" class="input-phone" placeholder="手机号" name="phone" id="registerPhone"/>
                </div>
            </span>
                    <span class="input-wrap">
                        <div style="position: relative">
                            <i class="iconfont icon-password"></i>
              <input type="password" class="input-phone" placeholder="密码" name="password" id="registerPassword"/>
                        </div>

            </span>
                    <span class="input-wrap">
                        <div style="position: relative">
                             <i class="iconfont icon-yanzhengma"></i>
              <input
                      type="password"
                      class="input-phone  input-checkcode"
                      placeholder="验证码"
                      name="checkCode"
              />
              <input
                      class="btn btn-default"
                      type="button"
                      value="获取验证码"
                      id="checkCode_btn_register"
                      style="height: 42px;float: right;color: #9fa3b0;outline: none"
              />
                        </div>
            </span>
                    <span class="input-wrap" id="check">

                    </span>
                    <span class="input-wrap-btn" id="registerFormSubmit">
              注册
            </span>
                    <span class="register-tip">
              <p><span class="register-btn" id="show-login">直接登录</span></p>
            </span>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="login-title" id="login-title">
    <img
            src="${pageContext.request.contextPath}/images/IMG_20191223_163010.png"
    />
    <h1>Love means never having to say you’re sorry.</h1>
    <h3>享受专属于你的影音盛宴</h3>
</div>
</body>
</html>
